<template>
  <el-dialog
    :model-value="show"
    title="选择商品"
    @close="
      () => {
        emit('hide', false);
        Clear();
      }
    "
  >
    <el-input
      v-model="form.keyword"
      placeholder="商品名称搜索"
      class="input-with-select"
    >
      <template #append>
        <el-button :icon="Search" @click="searchParamsFn" />
      </template>
    </el-input>

    <el-table
      @selection-change="handleSelectionChange"
      ref="reference"
      :data="list"
      cell-class-name="align-c"
      header-row-class-name="align-c"
      border
    >
      <el-table-column type="selection" width="55" />

      <slot name="content"></slot>
    </el-table>

    <div class="example-pagination-block">
      <el-pagination
        layout="prev, pager, next"
        v-model:current-page="form.pageNum"
        :total="total"
        background
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          @click="
            () => {
              emit('hide', false);
              Clear();
            }
          "
          >取消</el-button
        >
        <el-button type="primary" @click="add"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import useTable from "@/hooks/useTable";
import { Search } from "@element-plus/icons-vue";
import {
  ElDialog,
  ElInput,
  ElButton,
  ElTable,
  ElTableColumn,
  ElMessageBox,
  ElMessage,
} from "element-plus";
import { reactive, ref } from "vue";
import { queryProductListApi, recommendProductCreateApi } from "./api/index";

const child = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  query: {
    type: Function as any,
    default: () => {},
  },
  create: {
    type: Function as any,
    default: () => {},
  },
});

const emit = defineEmits(["hide"]);

const reference = ref<any>();

const form = reactive({
  keyword: "",
  pageNum: 1,
  pageSize: 5,
});

const { list, total, pageChangeHandle, pageSizeChangeHandle, searchParamsFn } =
  useTable(child.query, form);

type IDS = {
  id: number;
  name: string;
};
// 选中的数组
const ids = ref<any>([]);
const handleSelectionChange = (selection: any) => {
  ids.value = selection.map((item: IDS) => ({
    HomeHotList: item.id,
    productName: item.name,
  }));
};

const Clear = () => {
  form.keyword = "";
  form.pageNum = 1;
  reference.value?.clearSelection();
};

// 添加商品
const add = () => {
  ElMessageBox.confirm("使用要进行添加操作吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    child.create(ids.value).then((res: { code: number }) => {
      if (res.code === 200) {
        // 提示
        ElMessage.success("操作成功");
        // 清空数据
        Clear();
        // 关闭弹框
        emit("hide", true);
      }
    });
  });
};
</script>
<style scoped lang="less">
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.example-pagination-block {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.input-with-select {
  padding-bottom: 20px;
}

:deep(.align-c) {
  .cell {
    text-align: center !important;
  }
}
</style>
